<template>
  <section class="resetPassword">
    <div class="info-title"><span class="icon"></span>修改密码</div>
    <div class="small_app_info_warp">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForms" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号：">
          <p>{{userInfo.mobile}}</p>
        </el-form-item>
        <el-form-item label="原密码：" prop="old_password">
          <el-input type="password" v-model="ruleForm.old_password" :maxlength='20' style="width:250px;"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="password">
          <el-input type="password" v-model="ruleForm.password" :maxlength='20' style="width:250px;"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="repassword">
          <el-input type="password" v-model="ruleForm.repassword" :maxlength='20' style="width:250px;"></el-input>
        </el-form-item>
        <el-form-item label="">
          <span style="color:#9f9999">设置的密码需8～16位，大写字母、小写字母、数字组合</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForms')" v-resetClick>保存</el-button>
          <el-button @click="cancel()" v-resetClick>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </section>
</template>
<script>
import { userupdatepassword } from 'api/txEquipment/index'
export default {
  data () {
    var repassword = (rule, value, callback) => {
      if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else if (value) {
        callback()
      }
    }
    var passwordEvemt = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else if (!/^[\S]*$/.test(value)) {
        callback(new Error('密码不可有空格'))
      } else if (value.length < 8) {
        callback(new Error('密码不能少于8位'))
      } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/.test(value)) {
        callback(new Error('设置的密码需8 ~ 16位，大写字母、小写字母、数字组合'))
      } else {
        callback()
      }
    }
    return {
      userInfo: JSON.parse(localStorage.getItem('txUserInfo')), // 用户信息
      ruleForm: {
        old_password: '', // 密码
        password: '', // 新密码
        repassword: '' // 确认密码
      },
      rules: {
        old_password: [
          { required: true, message: '原密码必填', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '新密码必填', trigger: 'blur' },
          { validator: passwordEvemt, trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '确认密码必填', trigger: 'blur' },
          { validator: repassword, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var data = this.ruleForm
          userupdatepassword(data).then((res) => {
            this.$message({ message: '修改成功！', type: 'success' })
            let thisVal = this
            setTimeout(() => {
              thisVal.$router.back(-1)
            }, 2000)
          })
        }
      })
    },
    cancel () {
      this.$router.back(-1)
    }
  }
}
</script>
<style lang="less">
  .itemBoxName .el-form-item__error{
    z-index: 100;
    top: 60%;
  }
</style>
<style lang="less" scoped>
.resetPassword {
  .small_app_info_warp{
    border-radius: 10px;
    margin: 20px;
    background: #ffffff;
    padding: 40px;
  }
  .login-pro{
    cursor: pointer;
    color: #6190f5;
  }
  .wxInformation{
    width: 300px;
    margin: 0 auto!important;
  }
  .titlewxtop{
    margin-top: 0!important;
  }
    .userlogin{
      width: 360px;
      .userInformation{
        height: 69px;
        margin: 0;
        display: flex;
        padding-bottom: 4px;
        flex-direction: column;
        justify-content: flex-end;
        border-bottom: 1px solid #DCDFE6;
        .el-input{
          .el-input__inner{
            font-size: 16px;
            border: none!important;
            padding: 0;
          }
          input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset;
          }
        }
        .getspan{
          font-size: 16px;
          color: #2f80f1;
          cursor: pointer;
          user-select:none;
          height: 36px;
          line-height: 36px;
        }
        .Ungetspan{
          color: #A0ABC2;
        }
      }
      .userInformationcode{
        position: relative;
        padding-top: 6px;
        padding-bottom: 10px;
        border: none;
        .getspan{
          position: absolute;
          right: 0;
        }
      }
    }
}
</style>
